<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Example 16 (Sound Util - Simple Piano)</title>
		<script src="soundutil.js" charset="utf-8"></script>
		<script>
			window.onload = function() {
				var sources = [
					["../sounds/piano.mp3", "audio/mp3"],
					["../sounds/piano.ogg", "audio/ogg"]
				];

				// Check if we'll be able to run this example in the current browser
				var su = new SoundUtil();
				var a = new Audio();
				var failures = 0;

				for (var i = 0; i < sources.length; i++) {
					if (a.canPlayType(sources[i][1]) !== "maybe" &&
						a.canPlayType(sources[i][1]) !== "probably") {
						failures++;
					}
				}	

				if (failures === sources.length) {
					alert("This browser doesn't include support for neither MP3 nor OGG sound files.");
				} else {
					var vol = document.getElementById('volume');
					var volume = vol.value;

					vol.addEventListener('change', function() { 
						if (vol.value >= 0 && vol.value <= 1) {
							volume = vol.value; 
						} else {
							volume = 0.6;
						}
					}, false);

					// Detect the click events
					document.getElementById('piano').addEventListener('click', function(e) { 
						switch (e.target.getAttribute('id')) {
							case 'c1':
								su.play(sources, 0, 1000, vol.value, false);	
								break;
							case 'd':
								su.play(sources, 1, 1000, vol.value, false);	
								break;
							case 'e':
								su.play(sources, 2, 1000, vol.value, false);	
								break;
							case 'f':
								su.play(sources, 3, 1000, vol.value, false);	
								break;
							case 'g':
								su.play(sources, 4, 1000, vol.value, false);	
								break;
							case 'a':
								su.play(sources, 5, 1000, vol.value, false);	
								break;
							case 'b':
								su.play(sources, 6, 1000, vol.value, false);	
								break;
							case 'c2':
								su.play(sources, 7, 1000, vol.value, false);	
								break;
						}
					}, false);
				}
			}
		</script>
		<style type="text/css">
			#piano div { 
				width: 30px;
				height: 30px;
				border: 1px solid #666;
				margin: 5px;
				padding-top: 10px;
				float: left;
				cursor: pointer;
				text-align: center;
			}

			div.clb { clear: both; }
		</style>
    </head>
    <body>
    	Volume:<br />
    	<!-- The HTML element below is not implemented in all browsers -->
    	<input type="range" id="volume" min="0" max="1" step="0.1" value="0.6" />
    	  	
    	<div id="piano">
    		<div id="c1">C</div>
    		<div id="d">D</div>
    		<div id="e">E</div>
    		<div id="f">F</div>
    		<div id="g">G</div>
    		<div id="a">A</div>
    		<div id="b">B</div>
    		<div id="c2">C</div>
    	</div>
    	<div class="clb"></div>
    	Press any of the squares to play a note.
    </body>
</html>